<template>
  <base-page-view class-name="myAward">
    <view class="tab-box">
      <view class="tab" v-for="(item,index) in tabList" :key="index" @click="tabClick(item,index)" :class="{'active':tabSelect===index}">
        {{item}}
      </view>
    </view>
    <!-- 我的奖励 -->
    <view class="award-list" v-show="tabSelect===0">
      <view class="award-box" v-for="(item,index) in dataList[0].list" :key="index">
        <view class="goods-box">
          <view class="img-box">
            <url-image :src="item.prizePicture" class="good-img"></url-image>
          </view>
          <view class="info-box">
            <view class="title">{{item.prizeName}}</view>
            <view class="time" v-if="item.prizeType==='CASH'">已发放到可用余额</view>
            <view class="time" v-else-if="item.endEffectiveDate">截止{{item.endEffectiveDate}}之前有效</view>
          </view>
        </view>
        <view class="time-box">
          <view class="time">获取时间：{{item.createdAt}}</view>
          <view class="btn" :class="{'disable':item.status=='OVER'}" v-if="item.prizeType!=='THANK'" @click="btnClick(item)">{{item.statusMsg}}</view>
        </view>
      </view>
      <no-more :list="dataList[0].list" :nomore="dataList[0].nomore" nomoreTxt="已加载到底了"></no-more>
    </view>
    <!-- 抽奖明细 -->
    <view class="detail-content" v-show="tabSelect===1">
      <view class="detail-list">
        <view class="detail-box" v-for="(item,index) in dataList[1].list" :key="index">
          <view class="title-box">
            <view class="name">{{item.recordTitle||''}}</view>
            <view class="num">{{item.type|priceType}}{{item.drawNum}}</view>
          </view>
          <view class="time-box">
            <view class="time">{{item.createdAt}}</view>
            <view class="num">剩余：{{item.remainingNum}}</view>
          </view>
        </view>
      </view>
      <no-more :list="dataList[1].list" :nomore="dataList[1].nomore" nomoreTxt="已加载到底了"></no-more>
    </view>
  </base-page-view>
</template>

<script>
  export default {
    data() {
      return {
        tabList:['我的奖励', '抽奖明细'],
        tabSelect:0,
        // 奖品类型:
        // HONG_BAO("HONG_BAO", "红包"),
        // GOODS("GOODS", "商品"),
        // COUPON("COUPON", "优惠券"),
        // CASH("CASH", "现金"),
        // RANK("RANK", "排行奖池"),
        // OTHER("OTHER", "其他"),
        // THANK("THANK", "谢谢参与");
        dataList:[
          {
            pageNo:1,
            pageSize:10,
            list:[],
            nomore:false,
          },
          {
            pageNo:1,
            pageSize:10,
            list:[],
            nomore:false,
          }
        ],
        detailList:[],
        option:{},
      }
    },
    filters: {
      //收益类型,INCOME增加,EXPEND减少
      priceType(value) {
        if(!value){return};
        let txt="";
        switch (value){
          case 'INCOME':
            txt="+";
            break;
          case 'EXPEND':
            txt="-";
            break;
          default:
            break;
        }
        return txt;
      }
    },
    onLoad(option) {
      if(!this.token){
        this.$navigateTo('/pages/login/index');
        return;
      }
      this.option=option;
      this.getData();
    },
    onPullDownRefresh() {
      for (let s of this.dataList) {
        s.pageNo=1;
        s.list=[];
        s.nomore=false;
      }
      this.getData();
    },
    onReachBottom() {
      let index=this.tabSelect;
      if (this.dataList[index].nomore) return;
      this.dataList[index].pageNo += 1;
      if(this.tabSelect==0){
        this.getList0();
      }
      if(this.tabSelect==1){
        this.getList1();
      }
    },
    methods: {
      btnClick(item){
        //已过期
        if(item.status==='OVER'){
          return;
        }
        //立即查看类型
        if(item.status==='GO'){
          switch (item.prizeType){
            //优惠券
            case 'COUPON':
              this.$navigateTo('/pagesMine/coupon/index');
              break;
            //现金
            case 'CASH':
              this.$navigateTo('/pagesEarnings/balance/detail');
              break;
            //红包
            case 'HONG_BAO':
              this.$navigateTo('/pagesMine/my-red-packets/index?active=1');
              break;  
            default:
              break;
          }
        }
      },
      btnTxt(item){
        let txt='';
        if(item.status=='GO'){
          txt='立即查看'
        }else if(item.status=='OVER'){
          txt='已过期'
        }
        return txt;
      },
      tabClick(item,index){
        this.tabSelect=index;
      },
      getData(){
        this.getList0();
        this.getList1();
      },
      async getList0(){
        this.$api.activityApi.myDrawRecord({
          activityId:this.option.activityId,
          userId:this.userInfo.uid,
          pageNo:this.dataList[0].pageNo,
          pageSize:this.dataList[0].pageSize,
        }).then(res=>{
          if(res.code==0){
            setTimeout(function() {
              uni.stopPullDownRefresh()
            }, 500)
            if(res.data&&res.data.length>0){
              this.dataList[0].list = this.dataList[0].list.concat(res.data);
            }
            if (res?.data?.length < this.dataList[0].pageSize || !res.data) {
              this.dataList[0].nomore = true;
            }
          }
        });
      },
      async getList1(){
        this.$api.activityApi.getNumRecordList({
          activityId:this.option.activityId,
          userId:this.userInfo.uid,
          pageNo:this.dataList[1].pageNo,
          pageSize:this.dataList[1].pageSize,
        }).then(res=>{
          if(res.code==0){
            setTimeout(function() {
              uni.stopPullDownRefresh()
            }, 500)
            if(res.data&&res.data.length>0){
              this.dataList[1].list = this.dataList[1].list.concat(res.data);
            }
            if ((res.data&&res.data.length < this.dataList[1].pageSize) || !res.data) {
              this.dataList[1].nomore = true;
            }
          }
        });
      }
    }
  }
</script>

<style lang="scss" scoped>
.tab-box{
  display: flex;
  justify-content: space-around;
  background-color: white;
  font-size: 28rpx;
  height: 100rpx;
  align-items: center;
  position: sticky;
  top:0;
  z-index: 100;
  border-bottom: 2rpx solid #EEEEEE;
  .tab{
    position: relative;
    &.active:after{
      display: block;
      content: '';
      width: 40rpx;
      height: 6rpx;
      background-color: #000000;
      position: absolute;
      left: 50%;
      transform: translate(-50%);
      bottom: -14rpx;
    }
  }
}
.award-list{
  padding-bottom: 20rpx;
  .award-box{
    margin: 20rpx 26rpx;
    .goods-box{
      background: url('https://asset-uat.bisinuolan.cn/bixuan_uni/static/images/activity/lottery/quan1.png') no-repeat;
      background-size: 100% auto;
      height: 162rpx;
      display: flex;
      align-items: center;
      padding: 0rpx 17rpx;
      .img-box{
        width: 160rpx;
        height: 100rpx;
        margin-right: 41rpx;
        display: flex;
        justify-content: center;
        .good-img{
          height: 100rpx;
          width: 160rpx;
        }
      }
      .info-box{
        .title{
          font-size: 32rpx;
          font-family: PingFang SC;
          font-weight: 500;
          color: #000000;
          line-height: 21rpx;
        }
        .time{
          font-size: 24rpx;
          font-family: PingFang SC;
          font-weight: 400;
          line-height: 24rpx;
          margin-top: 20rpx;
          color: #333333;
        }
      }
    }
    .time-box{
      background: url('https://asset-uat.bisinuolan.cn/bixuan_uni/static/images/activity/lottery/quan2.png') no-repeat;
      background-size: 100% auto;
      height: 90rpx;
      display: flex;
      align-items: center;
      padding: 0rpx 34rpx 0rpx 37rpx;
      justify-content: space-between;
      .time{
        font-size: 28rpx;
        font-family: PingFang SC;
        font-weight: 400;
        color: #999999;
      }
      .btn{
        width: 134rpx;
        height: 46rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 1000rpx;
        border: 2rpx solid #000000;
        line-height: 46rpx;
        font-size: 24rpx;
        color: #000000;
        &.disable{
          border: 2rpx solid #CCCCCC;
          color: #999999;
        }
      }
    }
  }
}
.detail-list{
  margin-top: 20rpx;
  background-color: white;
  .detail-box{
    margin: 0rpx 35rpx;
    padding: 46rpx 0rpx 42rpx;
    border-bottom: 2rpx solid rgba(234, 234, 234, 1);
    .title-box{
      display: flex;
      align-items: center;
      justify-content: space-between;
      font-size: 28rpx;
      font-family: PingFang SC;
      font-weight: 400;
      color: #000000;
    }
    .time-box{
      display: flex;
      align-items: center;
      justify-content: space-between;
      font-family: PingFang SC;
      font-weight: 400;
      color: #999999;
      margin-top: 18rpx;
    }
    &:last-child{
      border-bottom: none;
    }
  }
}
</style>
